<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章信息展示</title>
    <style>
      body {
        margin: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #404040;
      }
      .wrap {
        width: 600px;
        margin: 0 auto;
      }

      .news-list {
        width: 600px;
      }

      .news {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #999;
      }

      .info {
        display: flex;
        width: 200px;
        justify-content: space-between;
        font-size: 12px;
        color: #888;
      }

      .tips {
        display: flex;
        width: 60px;
        justify-content: space-between;
      }
      .news-list {
        min-height: 686px;
      }
      .news-list li:nth-child(5) {
        border-bottom: none;
      }
      .pagination {
        display: flex;
        width: 300px;
        text-align: center;
        background-color: rgb(252, 238, 238);
        border-radius: 25px;
        overflow: hidden;
        margin: 0 auto;
      }
      .pagination a {
        width: 30px;
        line-height: 30px;
        color: #404040;
        flex: 1;
      }
      .pagination a:nth-child(1) {
        transform: rotate(-45deg);
      }
      .pagination .next {
        transform: rotate(45deg);
      }
      .pagination a:hover {
        color: rgb(247, 73, 73);
      }
      .newsContainer {
        width: 400px;
      }
      .news img {
        width: 100px;
        height: 150px;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <ul class="news-list">
        <li class="news">
          <a href="javascript:;">
            <img src="../img/超.jpg" alt="" width="150px" height="200px" />
          </a>
          <div class="newsContainer">
            <h3>
              <a href="javascript:;" class="title"
                >湖南一许姓男子打
                110要警察介绍嫖娼渠道，警方调查发现他是逃犯。newbee,还得是我超哥</a
              >
            </h3>
            <div class="info">
              <span class="tips"
                ><span>纵火</span><span>湖南</span><span>逮捕</span></span
              >
              <!-- <span class="line"></span> -->
              <span class="time">| &nbsp;&nbsp;1小时前</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <a href="javascript:;" class="prev">⌜</a>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <a href="javascript:;" class="next"></a>
      </div>
    </div>
    <script></script>
  </body>
</html>
